<template>
  <div style="margin-left: 20px;margin-top: 10px">
    <div><span><i class="el-icon-user" />任务进度</span></div>
    <el-row style="margin-top: 20px;margin-left: 15px;">
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>本月目标额度</span>
          </div>
          <div style="margin-left: 250px;">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
          <div style="align-items: center;margin-left:210px;margin-top: 10px">
            未完成，还需努力
          </div>
          <div style="margin-top: 20px;margin-left: 235px">
            <span style="color: #f4516c">720</span>/<span style="font-weight: bold">2500</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>本月客户任务</span>
          </div>
          <div style="margin-left: 250px;">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
          <div style="align-items: center;margin-left:210px;margin-top: 10px">
            未完成，还需努力
          </div>
          <div style="margin-top: 20px;margin-left: 250px">
            <span style="color: #f4516c">18</span>/<span style="font-weight: bold">30</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin-top: 30px"><span><i class="el-icon-user" />任务进度</span></div>
    <el-row>
      <el-col :span="12">
        <el-card style="width: 90%;height: 150px;margin-top: 20px">
          <!--          <i class="el-icon-phone" style="font-size: 45px"></i>-->
          <div style="float: left">
            <el-avatar icon="el-icon-phone" />
          </div>
          <div style="float: left;margin-left: 40px;color: #f4516c">15</div>
          <div style="margin-top: 20px;position: relative;left: 25px">未联系</div>
        </el-card>
        <el-card style="width: 90%;height: 150px;margin-top: 20px">
          <!--          <i class="el-icon-phone" style="font-size: 45px"></i>-->
          <div style="float: left">
            <el-avatar icon="el-icon-s-promotion" />
          </div>
          <div style="float: left;margin-left: 40px;color: #f4516c">20</div>
          <div style="margin-top: 20px;position: relative;left: 25px">需要跟进</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="width: 90%;height: 150px;margin-top: 20px">
          <!--          <i class="el-icon-phone" style="font-size: 45px"></i>-->
          <div style="float: left">
            <el-avatar icon="el-icon-warning" />
          </div>
          <div style="float: left;margin-left: 40px;color: #f4516c">3</div>
          <div style="margin-top: 20px;position: relative;left: 25px">无意向</div>
        </el-card>
        <el-card style="width: 90%;height: 150px;margin-top: 20px">
          <!--          <i class="el-icon-phone" style="font-size: 45px"></i>-->
          <div style="float: left">
            <el-avatar icon="el-icon-s-marketing" />
          </div>
          <div style="float: left;margin-left: 40px;color: #f4516c">60</div>
          <div style="margin-top: 20px;position: relative;left: 25px">已成交</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index'
}
</script>

<style scoped>
.box-card{
  /*position: absolute;*/
  /*top: 10%;*/
  /*left: 70%;*/
  width: 90%;
  height: 250px;
}
</style>
